<template>
	<div class="topBg">
		<div class="fl">
			<div class="quyu">
				<ul class="ulAll">
					<li class="active">区域</li>
					<li>附近</li>
					<li>地铁</li>
				</ul>
				<ul class="ul1">
					
				</ul>
				<ul class="ul2">
					
				</ul>
			</div>
		</div>
		<div class="btn0">
			<button class="reset">重置</button>
			<button class="ok">确定</button>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				msg: 'Welcome to Your Vue.js App'
			}
		},
		mounted: function() {
			let screenMetro = JSON.parse(sessionStorage.getItem("screenMetro"));
			let screenSpace = JSON.parse(sessionStorage.getItem("screenSpace"));
			
			//找出地铁线
			var cc = [];
			for(var i = 0; i < screenMetro.length; i++) {
				cc.push(screenMetro[i].metroName);
			}
			let arr = cc;
			var that= this;
			let resultarr = [...new Set(arr)];
			//找出区域
			var space = [];
			for(var i = 0; i < screenSpace.length; i++) {
				space.push(screenSpace[i].spaceName);
			}
			
			let arr1 = space;
			let resultarr0 = [...new Set(arr1)];
			
			var data = JSON.parse(localStorage.getItem('data'));
			if(data.screenNearBy.screenNearByNum){
				$('.ul1 li').addClass('active');
			}
			
			if($('.active').html() == '区域') {
				var cx = '';
				for(var i = 0; i < resultarr0.length; i++) {
					cx += "<li style='text-align:center;line-height:40px;' >" + resultarr0[i] + '</li>'
				}
				$('.ul1').html(cx)
			}
			
			$('.ulAll').on('click', 'li', function() {
				$('.ul2').hide()
				$(this).addClass('active').siblings().removeClass('active');
				if($('.active').html() == '地铁') {
					var cx = '';
					for(var i = 0; i < resultarr.length; i++) {
						cx += "<li style='text-align:center;line-height:40px;' >" + resultarr[i] + "</li>"
					}
					$('.ul1').html(cx)
				}
				if($('.active').html() == '附近') {
					var cx = `<li data-minJuLi='' data-maxJuLi='' class="active" style="color: #0186c2;text-align: center;line-height: 40px;">不限</li>
						<li data-minJuLi='0' data-maxJuLi='1000' style="color: #333;text-align: center;line-height: 40px;">1千米以内</li>
						<li data-minJuLi='2000' data-maxJuLi='3000' style="color: #333;text-align: center;line-height: 40px;">2千米-3千米</li>
						<li data-minJuLi='3000' data-maxJuLi='5000' style="color: #333;text-align: center;line-height: 40px;">3千米-5千米</li>
						<li data-minJuLi='5000' data-maxJuLi='7000' style="color: #333;text-align: center;line-height: 40px;">5千米-7千米</li>
						<li data-minJuLi='7000' data-maxJuLi='1' style="color: #333;text-align: center;line-height: 40px;">7千米以外</li>`;
					$('.ul1').html(cx);
				}
				if($('.active').html() == '区域') {
					var cx = '';
					for(var i = 0; i < resultarr0.length; i++) {
						cx += "<li style='text-align:center;line-height:40px;' >" + resultarr0[i] + '</li>'
					}
					$('.ul1').html(cx)
				}
			})
			
			$('.ul1').on('click','li',function(){
				if($('.ulAll .active').html()=='附近'){
					$(this).css('color','#0186c2').siblings().css('color','#333');
					$(this).addClass('active').siblings().removeClass('active');
				}
				if($('.ulAll .active').html()=='地铁'){
					$(this).css('color','#0186c2').siblings().css('color','#333');
					$(this).addClass('active').siblings().removeClass('active');
					var str = $(this).html();
					var kk = '';
					for(var i = 0; i < screenMetro.length; i++) {
						if(screenMetro[i].metroName==str){
							kk+="<li style='text-align:center;line-height:40px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;' >" + screenMetro[i].metroer + '</li>';
						}
					}
					$('.ul2').show().html(kk)
				}
				if($('.ulAll .active').html()=='区域'){
					$(this).css('color','#0186c2').siblings().css('color','#333');
					$(this).addClass('active').siblings().removeClass('active');
					var str = $(this).html();
					var kk = '';
					for(var i = 0; i < screenSpace.length; i++) {
						if(screenSpace[i].spaceName==str){
							kk+="<li style='text-align:center;line-height:40px;' >" + screenSpace[i].tradArea + '</li>';
						}
					}
					$('.ul2').show().html(kk)
				}
			});
			
			$('.ul2').on('click','li',function(){
				$(this).css('color','#0186c2').siblings().css('color','#333');
				$(this).addClass('active').siblings().removeClass('active');
			});
			
			//请求数据
			$('.ok').click(function(){
				var now = JSON.parse(localStorage.getItem('nowLngLat'))
				var data=JSON.parse(localStorage.getItem('data'));
				data.page=1;
				
				
				var obj = {
					screenNearBy:{
					}
				};
				if($('.ulAll .active').html()=='附近'){
					var obj0=$('.ul1 .active').attr('data-minJuLi')+'-'+$('.ul1 .active').attr('data-maxJuLi');
					console.log(obj0)
					obj.screenNearBy.screenNearByNum =obj0;
					obj.screenNearBy.screenNearBySign='';
					if($('.ul1 .active').attr('data-minJuLi')==0){
						obj.screenNearBy.screenNearByNum =$('.ul1 .active').attr('data-maxJuLi');
						obj.screenNearBy.screenNearBySign=0;
					}
					if($('.ul1 .active').attr('data-maxJuLi')==1){
						obj.screenNearBy.screenNearByNum =$('.ul1 .active').attr('data-minJuLi');
						obj.screenNearBy.screenNearBySign=1;
					}
				}else if($('.ulAll .active').html()=='地铁'){
					obj.screenMetro=$('.ul1 .active').html();
					obj.screenMetroer=$('.ul2 .active').html()=='undefined'?'':$('.ul2 .active').html();
				}else if($('.ulAll .active').html()=='区域'){
					obj.screenSpace=$('.ul1 .active').html();
					obj.screenTradArea=$('.ul2 .active').html()=='undefined'?'':$('.ul2 .active').html();
				}
				data.screenNearBy=obj.screenNearBy;
				data.screenMetro=obj.screenMetro;
				data.screenMetroer=obj.screenMetroer;
				data.screenSpace=obj.screenSpace;
				data.screenTradArea=obj.screenTradArea;
				if(now && data.screenNearBy.screenNearByNum){
					data.lat = now.lat;
					data.lng = now.lng;
					$('.fl').hide();
				}else{
					data.lat = '';
					data.lng = '';
					$('.fl').hide();
				}

				data.page=1,
				localStorage.setItem('data',JSON.stringify(data));
				that.$router.push({
					path: '/',
					name: 'index',
					query: {
						type: data.houseType
					}
				});
				
				location.reload();
			})
			
			$('.ul0 li').eq(0).click(function(){
				$('.fl').show();
			})
			
			$('.reset').click(function(){
				$('.ul1').find('li').each(function(){
					$(this).attr('class','').css('color','#333')
				})
				$('.ul2').find('li').each(function(){
					$(this).attr('class','').css('color','#333')
				})
				if($('.ulAll .active').html()=='附近'){
					$('.ul1 li').eq(0).attr('class','active').css('color','#0186c2')
				}
			})
			
			$('.topBg').click(function(e){
				location.href='#/'
				$('.lbt').slideDown();
			})
			$('.topBg div').click(function(event){
				
				event.stopPropagation();
			})
		},
		methods: {

		}
	}
</script>
<style scoped>
	.topBg {
		position: absolute;
		width: 100%;
		height: 600px;
		z-index: 999;
		overflow: hidden;
		background-color: rgba(0,0,0,0.3);
	}
	.ulAll {
		background-color: #f8f8f8;
	}
	.ul2 {
		display: none;
		height: 240px;
		overflow: auto;
	}
	.ul1 {
		height: 240px;
		overflow: auto;
	}
	.fl {
		position: absolute;
		width: 100%;
		height: auto;
		overflow: auto;
		background-color: #fff;
	}
	
	.quyu {
		display: flex;
		justify-content: space-around;
	}
	
	ul {
		padding: 0;
		margin: 0;
		list-style: none;
		color: #333;
		width: 100%;
		font-size: 13px;
		/*border-right: 1px solid #eee;*/
	}
	
	ul:last-child {
		border: 0;
	}
	
	ul li {
		text-align: center;
		line-height: 40px;
	}
	
	ul li.active {
		color: #0186c2;
	}
	
	.btn0 {
		position: absolute;
		width: 100%;
		top: 240px;
		background-color: #f8f8f8;
		display: flex;
		justify-content: space-around;
	}
	
	.btn0 button {
		width: 35%;
		margin: 24px 0;
		border-color:#c6c6c6;
	}
	
	.btn0 button.ok {
		background-color: #0186c2;
		color: #fff;
	}
</style>